import React, {useMemo} from 'react';
import styled from 'styled-components';
import {ModalProps} from '../Modal';
import useBasisCash from "../../hooks/useBasisCash";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import {DepoManager} from "../ComponentsManager";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {
    colors,
    FishColors,
    FishInfoCn,
    FishName,
    FishDna,
    getFishCardSrc,
    getFishCardBg,
    FishLp
} from "../../common/common";
import {ContainerModal, FlexView, FlexViewBetween, MainButton} from "../components";
import useApprove721 from "../../hooks/useApprove721";
import {BigNumber} from "ethers";
import {getDisplayBalance} from "../../utils/formatBalance";
import {FishCard} from "./FishModal";
import useStakeCards from "../../hooks/useStakeCards";

const RewardFishModal: React.FC<ModalProps> = ({onDismiss,title,onSubmit=()=>{}}) => {
    const basisCash = useBasisCash();
    // const [item, setItem] = React.useState<any>({});
    // React.useEffect(()=>{
    //     basisCash.getOwnerOfLast()
    //         .then(res=>{
    //             setItem(res);
    //         })
    // },[])
    return (
        <ContainerModal
            onClick={onDismiss}
        >
            <RewardCardView>
                {/*<FishIcon*/}
                {/*    src={getFishCardSrc(item.fishLevel,item.fishLevel,item.dna)}*/}
                {/*></FishIcon>*/}
                {/*<CloseIcon*/}
                {/*    src={ImageCommon.icon_close_main}*/}
                {/*    onClick={onDismiss}*/}
                {/*></CloseIcon>*/}
                <TipSuccess>恭喜您,合成成功-请前往我的鱼卡查看</TipSuccess>
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>鱼卡编号:</TitleH3>*/}
                {/*    <TitleH3>{item.number}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>NYC值:</TitleH3>*/}
                {/*    <TitleH3>{item.price}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>LP值:</TitleH3>*/}
                {/*    <TitleH3>{item.stake}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>形态:</TitleH3>*/}
                {/*    <TitleH3>{FishInfoCn[FishName[item.fishTypeNumber]]}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>头部:</TitleH3>*/}
                {/*    <TitleH3>{FishInfoCn[FishName[item.a]]}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>身体:</TitleH3>*/}
                {/*    <TitleH3>{FishInfoCn[FishName[item.b]]}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>鱼鳍:</TitleH3>*/}
                {/*    <TitleH3>{FishInfoCn[FishName[item.c]]}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>尾部:</TitleH3>*/}
                {/*    <TitleH3>{FishInfoCn[FishName[item.d]]}</TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<FlexViewCenter>*/}
                {/*    <TitleH3>品质:</TitleH3>*/}
                {/*    <TitleH3>*/}
                {/*        {FishDna[item.dna]}*/}
                {/*    </TitleH3>*/}
                {/*</FlexViewCenter>*/}
                {/*<MainButton*/}
                {/*    title={"继续合成"}*/}
                {/*    onClick={()=>{*/}
                {/*        onDismiss();*/}
                {/*        onSubmit();*/}
                {/*    }}*/}
                {/*></MainButton>*/}
            </RewardCardView>
        </ContainerModal>
    )
}



const FlexViewCenter = styled.div`
   display:flex;
   align-items:center;
   justify-content:center;
`
const RewardCardView = styled(FlexViewCenter)`
    flex-direction:column;
    width: 300px;
    box-shadow: 0px 0px 10px 0px ${colors.black};
    border-radius: 20px;
    background-color:${colors.white};
    padding:30px;
    position:relative;
`
const CloseIcon = styled.img`
    width:20px;
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
`
const FishIcon = styled.img`
    width:160px;
    border-radius: 30px;
`
const TipSuccess = styled.div`
    font-size: 18px;
    font-weight: bold;
    color: ${colors.main};
    margin-top:30px;
    margin-bottom:30px;
`
const TitleH3 = styled.div`
    font-size: 14px;
    font-weight: bold;
    color: ${colors["333333"]};
`
const AddWrap = styled(FlexViewCenter)`
    flex-direction:column;
    width: 190px;
    height: 120px;
    border: 1px dashed ${colors.main};
    border-radius: 20px;
`
const AddIcon = styled.img`
    width:50px;
    height:50px;
`
const AddTitle = styled.div`
    font-size: 18px;
    font-weight: bold;
    color: ${colors.main};
    margin-top:10px;
`
const PageShows = styled.div`
    position:  fixed;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
`

const MyFishCard = styled.div`
    width: 100%;
    max-width: 800px;
    height: 920px;
    background: #FFFFFF;
    border-radius: 20px;
`

const MyFishTitHeadCont = styled.div`
    width: 100%;
    background: linear-gradient(0deg, #F27405, #FFA82B);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 17px;
`

const MyFishTitDesc = styled.div`
    height: 110px;
    margin: 0 18px;
    background: #D26300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display:flex;
`

const DescFlex1 = styled.div`
display:flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

`

const DescFlexRight = styled.div`
display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-right: 20px;
`

const DescFlex2 = styled.div`
display:flex;
flex-direction: row;
align-items: center;
`

const DescBtn1 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #FFBB7F;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
`

const DescBtn2 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #96CAFF;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
`

const DescBtn3 = styled.div`
width: 110px;
line-height: 30px;
background: #FFBB7F;
border-radius: 15px;
text-align: center;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
cursor:pointer;
`

const DescText = styled.div`
margin-left: 9px;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
`

const MyFishTitHead = styled.div`
width: 100%;
height: 56px; 
display:flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
`

const MyFishTit = styled.span`
line-height: 56px;
font-size: 20px;
font-family: FZCuYuan-M03S;
font-weight: 400;
color: #FFFFFF;
`

const SpanRightc = styled.span`
line-height: 18px;
font-size: 16px;
font-family: PingFang SC;
text-decoration: underline;
color: #FFFFFF;
margin-top: 15px;
`

const FishConts = styled.div`
width: 100%;
height: 605px; 
padding: 21px 35px;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
`

const FishCardsb = styled.div`
width: 230px;
height: 390px; 
position: relative;
margin-top: 51px;
display:flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
`

const FishCSpanTit = styled.span`
margin-top: 10px;
text-align: center;
line-height: 18px;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const FishCSpanXian = styled.div`
width:100%;
border-bottom: 1px dashed #ffffff;
margin-top: 12px; 
`

const FishCSpanYuka = styled.span`
text-align: center;
line-height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-top: 10px;
`

const FishYukuai = styled.div`
width: 190px;
background: rgba(255,255,255,0.42);
margin-top: 11px;
padding: 10px 0;
`

const FishziConts = styled.div`
display: flex;
flex: 1;
`

const FishZizuo = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: right;
flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
`

const FishZiyou = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: left;
flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
`

const FishdiBitn = styled.div`
    text-align: center;
    width: 160px;
    line-height: 36px;
    background: ${colors.main};
    color:${colors.white};
    border-radius: 18px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    cursor:pointer;
`
const FishBtnBorder = styled(FishdiBitn)`
    background: ${colors.white};
    color:${colors.main};
    border: 2px solid ${colors.main};
`
const FishGuize = styled.div`
height: 90px;
background: #FFEFE3;
border-radius: 10px;
margin: 20px 35px;
padding: 5px 16px;
`

const FishGuizeTit = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #F27405;
`

const FishGuizeDesc = styled.div`
line-height: 41px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 24px;
`

const Zhiya = styled.span`
width: 42px;
text-align: center;
background: #F27405;
border-radius: 8px;
line-height: 18px;
font-size: 12px;
margin-left: 2px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
`

const ZhiyaContCard = styled.div`
width: 230px;
height: 260px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #FFE4CC;
border-radius: 20px;
display: flex;
flex-direction: column;
    justify-content: end;
    align-items: center;
`

const ZhiyaPosi = styled.div`
position: relative;
width: 191px;
margin-top: 20px;
`

const Zhiyapip = styled.div`
position: absolute;
width: 131px;
line-height: 32px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 30px;
top: 0;
background: #000000;
color: #FFFFFF;
text-align: center;
`

const ZhiyaBtnzy = styled.div`
width: 160px;
background: #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
`

const ZhiyaTiquBtn = styled.div`
width: 160px;
border: 1px solid #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #F27405;
text-align: center;
margin-top: 10px;
`

const Xiaotan1 = styled.div`
position: fixed;
    z-index: 89;
    top: 50%;
    left: 50%;
    margin: -20% 0 0 -150px;
width: 300px;
z-index: 100;
background: #fff;
border-radius: 10px;
`

const XiaotanSpan = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const XiaotanDivCon = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 30px;
`

const XiaotanDivCon1 = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanDivCon2 = styled.div`
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanTishi = styled.span`
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanTishiTexr = styled.div`
font-size: 18px;
line-height: 30px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 16px;
padding: 0 30px;
`

const XiaotanTishiTexr1 = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanBtns1 = styled.div`
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
`

const XiaotandivFlex = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
`
export default RewardFishModal;
